<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue05</title>
	<style type="text/css">
		*{margin:0; padding:0;}
		 .wraper{
		 	 height: 500px;
		 	 width: 500px;
		 	 position: fixed;
		 	 top: 0px;
		 	 left: 0px;
		 	 right: 0px;
		 	 bottom: 0px;
		 	 margin: auto; 
		 }
		 .bg-col{
		 	 background-color:red;
		 }
		 .txt-col{
		 	 color: #ccc;
		 	 font-size: 50px;
		 }
	</style>
</head>
<body>
 <!--<div class="wraper" id="wraper" v-bind:class="{'bg-col':isbool1,'txt-col':isbool2}">
   <button v-on:click="changestyle">change</button>
 	{{isbool1}}
 	{{isbool2}}
 </div>-->
 <!-- <div class="wraper" id="wraper" v-bind:class="classObject">
   <button>change</button>
 	{{classObject.bg-col}}
 </div>-->
 <div class="wraper" id="wraper" v-bind:class="[bg-col,txt-col]">
   <button v-on:click="changestyle">change</button>
 	{{isbool1}}
 	{{isbool2}}
 </div>
	
</body>
<script src="js/vue.js"></script>
<script>
(function(){
    "use strict";
    var vm = new Vue({
        el:"#wraper",
        data:{
        		bg-col:"bg-col",
        		txt-col:"txt-col"	
        },
        methods:{
        	 changestyle:function(){
        	 	console.log(this);
        	 	this.isbool2=!this.isbool2;
        	 	this.isbool1=!this.isbool1;
        	 },
        	 recoverstyle:function(){

        	 }
           
        },
        computed:{
           
        }
    })
})()
</script>
</html>